<template>
  <div class="container top-0 position-sticky z-index-sticky">
    <div class="row">
      <div class="col-12">
        <top-navbar           
          isBlur="blur  border-radius-lg my-3 py-2 start-0 end-0 mx-4 shadow"
          v-bind:darkMode="true"
          isBtn="bg-gradient-success"/>
      </div>
    </div>
  </div>
  <main class="main-content mt-0">
    <div
      class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg gym"
      style="background-position: top;
             "
    >
    <span class="mask bg-gradient-dark opacity-6 "></span>
      <div class="container" >
        <!-- <div v-for="" class="row"></div> -->
        <div class="row mt-6" >
          <div class="col-md-4  mt-6" v-for="item in getData" :key="item">
            <default-info-card
              :img="item.img"
              :title="item.f_name"
              :desc="item.location"
              :price= "'$'+item.price"
            />
          </div>
        </div>
      </div>
    </div>
  </main>
  <app-footer />
</template>

<script>
import TopNavbar from "@/examples/PageLayout/TopNavbar.vue";
import AppFooter from "@/examples/PageLayout/Footer.vue";
import DefaultInfoCard from "@/examples/Cards/DefaultInfoCard.vue";
import axios from 'axios';
// import router from "@/router/index.js"

const body = document.getElementsByTagName("body")[0];
export default {
  name: "homepage",
  components: {
    TopNavbar,
    AppFooter,
    DefaultInfoCard,
  },
  data() {
    return {
      getData:[],
      formdata:[],
      rowCount:0,
      count:0,
      salary: {
        classIcon: "text-white ni ni-tag",
        title: "Salary",
        desc: "Belong Interactive",
        price: "+$2000",
      },
      paypal: {
        classIcon: "text-white fab fa-info",
        title: "./../assets/img/gym.jpg",
        desc: "Freelance Payment",
        price: "$455.00",
      },
    };
  },
  created() {
    this.$store.state.hideConfigButton = true;
    this.$store.state.showNavbar = false;
    this.$store.state.showSidenav = false;
    this.$store.state.showFooter = false;
    body.classList.remove("bg-gray-100");
    axios.get('https://fitzone.work:8080/all')
    .then(res =>{
      console.log(res);
      this.getData = res.data;
    })
    .catch(err=>{
      console.error(err);
    })
  },
  beforeUnmount() {
    this.$store.state.hideConfigButton = false;
    this.$store.state.showNavbar = true;
    this.$store.state.showSidenav = true;
    this.$store.state.showFooter = true;
    body.classList.add("bg-gray-100");
    
  },
};
</script>
<style>
.gym{
  background-image:url('./../assets/img/gym.jpg');
}
</style>